<template>
  <div style="height: calc(100vh - 120px)">
    <!-- 父级容器一定要给高度 -->
    <logicflow ref="logicflowRef" :disabled="false" :nodesArr="nodesArr"></logicflow>
  </div>
</template>
<script>
import logicflow from '@/components/logicflow/index.vue'
// 模拟自定义节点列表
import { defaultNodeArr } from '@/components/logicflow/config'
import { nodesList } from '@/components/logicflow/mockNodes.js'

// 自定义节点绘制数据
import { mockData0, mockData, mockData02 } from '@/components/logicflow/mockdata.js'

export default {
  name: 'HomeView',
  components: { logicflow },
  data() {
    return {
      isShowLogicflow: false,
      nodesArr: [],
    }
  },
  created() {
    Promise.all([this.getNodesArr(), this.getRenderData()]).then((res) => {
      console.log('all', res)
      this.nodesArr = res[0]
      this.$nextTick(() => {
        this.$refs.logicflowRef.$render(res[1])
      })
    })
  },
  methods: {
    // 模拟 获取节点数据
    getNodesArr() {
      return new Promise((resolve) => {
        setTimeout(() => {
          let dd = [...defaultNodeArr, { groupTitle: '自定义扩展', nodesList }]
          resolve(dd)
        }, 0.4 * 100)
      })
    },
    // 模拟 渲染数据
    getRenderData() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(mockData02)
        }, 1000)
      })
    },
  },
}
</script>
